<!--万能表单模块-->
<template>
  <div style="width: 100%;height: 100%;">
    <div class="login-box">
      <div class="login-box-body">
        <div class="login-logo">
          <span><b>Sea</b>Admin</span>
        </div>
        <p class="login-box-msg">Sign in to start your session</p>

        <form>
          <div class="box-item">
            <el-input placeholder="Email" suffix-icon="fa fa-user" v-model="username"></el-input>
          </div>
          <div class="box-item">
            <el-input placeholder="Password" v-model="password" show-password></el-input>
          </div>
          <div class="box-item">
            <label>
              <el-checkbox type="checkbox" label="Remember Me"></el-checkbox>
            </label>
          </div>
          <div class="box-item">
            <div class="pull-left">
              <el-button type="text" style="padding: 3px">I forgot my password</el-button>
              <br>
              <el-button type="text" style="padding: 3px">Register a new membership</el-button>
            </div>
            <el-button size="large" class="pull-right" @click="login()">Sign In</el-button>
            <div class="clearfix"></div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>

/**
 * 登录界面
 */
export default {
    components: {},
    data: function () {
        return {
            username: '',

            password: '',
            //参数
            formGroup: [],
            //触发器
            trigger: {},
            //默认值
            defaultData: {}
        }
    },
    mounted: function () {
    },
    methods: {
        login: function () {
            let un = this.username.trim();
            let pwd = this.password.trim();
            this.$api.user().login(un, pwd).then(ret => {
                if (ret.code === 0) {
                    let token = ret.data;
                    this.$application.login().then(user => {
                        this.$router.push({path: '/'});
                    });
                }
            })
        }
    }
}
</script>

<style scoped>
.login-logo,
.register-logo {
    font-size: 35px;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 300;
}

.box-item {
    margin: 10px;
}

.login-box,
.register-box {
    width: 360px;
    margin: 7% auto;
}

.login-box-msg,
.register-box-msg {
    margin: 0;
    text-align: center;
    padding: 0 20px 20px 20px;
}
</style>
